<template>
  <div class="hello">
    <link-area/>
    <h1>{{ welcome }}</h1>
    <h5>已经有 {{ count }} 位道友通过传送门进入！</h5>
    <h6>信号状态：{{ socketStatus }}</h6>
    <ol>
      <li v-for="done in doneTodos">{{ done.text }}</li>
    </ol>
  </div>
</template>


<script>
  import { mapState, mapGetters } from 'vuex'
  import LinkArea from '@/components/LinkArea'

  export default {
    name: 'Hello',
    components: {
      LinkArea
    },
    computed: {
      socketStatus () {
        return this.$socket.status
      },
      ...mapGetters({
        'doneTodos': 'todos/doneList'
      }),
      ...mapState({
        count: state => state.count.value,
        welcome: state => state.welcome.text
      })
    }
  }
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  .hello {
    flex: 1;
  }
</style>
